<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 悬停表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-hover">
	<caption>悬停表格布局</caption>
	<thead>
		<tr>
			<th>id</th>
			<th>name</th>
			<th>phone</th>
		</tr>
	</thead>
	<tbody>


	</tbody>
</table>

</body>
<script type="text/javascript">
	$.ajax({
		type:"get",
		url:"http://localhost:3000/phone",
		async:true,
		success:function(res){
			console.log(res)
			$.each(res, function(index,item) {
				var str = `
						<tr>
							<td>${item.id}</td>
							<td>${item.name}</td>
							<td>${item.phone}</td>
						</tr>
				`;
				$("tbody").append(str);
			});
		}
	});
	
</script>
</html>
